<template>
  <div class="sell">
    <header>
      <div class="city">
        <div class="city-1">
          <v-distpicker class="areas" @selected="city"></v-distpicker>
        </div>
        <div class="search">
          <input type="text" v-model="value" />&emsp;
          <button @click="search(value)">搜索</button>
        </div>
      </div>
      <button class="add" @click="showModal">新增</button>
    </header>
    <main>
      <div class="table">
        <a-table
          :columns="columns"
          :data-source="list"
          class="table-1"
          :pagination="{ pageSize: 5 }"
          :rowKey="record=>record.id"
        >
          <a slot="name" slot-scope="text">{{ text }}</a>
          <span slot="customTitle">序号</span>
          <span slot="tags" slot-scope>
            <a-switch checked-children="正常" un-checked-children="禁止" default-checked />
          </span>
          <span slot="action" slot-scope="text, record">
            <a class="ant-dropdown-link" @click="record">编辑</a>
            <a-divider type="vertical" />
            <a class="ant-dropdown-link" @click="del(record.id)">删除</a>
          </span>
        </a-table>
      </div>
      <div class="modal">
        <a-modal v-model="visible" title="Basic Modal" @ok="handleOk(ObjetValue)">
          <p>
            序号:&emsp;&emsp;
            <input type="text" name id v-model="ObjetValue.id" />
          </p>
          <p>
            小区名称:
            <input type="text" name id v-model="ObjetValue.site" />
          </p>
          <p>
            标题:&emsp;&emsp;
            <input type="text" name id v-model="ObjetValue.plot" />
          </p>
          <p>
            面积:&emsp;&emsp;
            <input type="text" name id v-model="ObjetValue.price" />
          </p>
          <p>
            时间:&emsp;&emsp;
            <input type="text" name id v-model="ObjetValue.time" />
          </p>
          <p>
            排序:&emsp;&emsp;
            <input type="text" name id v-model="ObjetValue.name" />
          </p>
        </a-modal>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "../utils/request";
import { areaList } from "@vant/area-data";
const columns = [
  {
    dataIndex: "id",
    key: "id",
    slots: { title: "customTitle" },
    scopedSlots: { customRender: "name" }
  },
  {
    title: "小区名称",
    dataIndex: "site",
    key: "site"
  },
  {
    title: "标题",
    dataIndex: "plot",
    key: "plot"
  },
  {
    title: "面积",
    key: "price",
    dataIndex: "price"
  },
  {
    title: "时间",
    dataIndex: "time",
    key: "time"
  },
  {
    title: "排序",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "状态",
    key: "tags",
    dataIndex: "tags",
    slots: { title: "Tags" },
    scopedSlots: { customRender: "tags" }
  },
  {
    title: "Action",
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];

export default {
  data() {
    return {
      areaList,
      value: "",
      visible: false,
      flag: true,
      options: [
        {
          value: "zhejiang",
          label: "Zhejiang",
          children: [
            {
              value: "hangzhou",
              label: "Hangzhou",
              children: [
                {
                  value: "xihu",
                  label: "West Lake"
                }
              ]
            }
          ]
        },
        {
          value: "jiangsu",
          label: "Jiangsu",
          children: [
            {
              value: "nanjing",
              label: "Nanjing",
              children: [
                {
                  value: "zhonghuamen",
                  label: "Zhong Hua Men"
                }
              ]
            }
          ]
        }
      ],
      list: [],
      columns,
      select: "请选择省份",
      option: [
        { text: "请选择省份", value: "请选择省份" },
        { text: "广东", value: "广东" },
        { text: "重庆", value: "重庆" },
        { text: "上海", value: "上海" },
        { text: "北京", value: "北京" },
        { text: "江苏", value: "江苏" }
      ],
      select1: "城市",
      option1: ["城市", "深圳", "成都", "苏州", "滁州", "大理", "西藏"],
      select2: "请选择区县",
      option2: [
        { text: "请选择区县", value: "请选择区县" },
        { text: "天长市", value: "天长市" },
        { text: "奉贤区", value: "奉贤区" },
        { text: "黄浦区", value: "黄浦区" }
      ],
      ObjetValue: {
        id: "",
        site: "",
        plot: "",
        price: "",
        time: "",
        name: ""
      }
      // select3: "筛选",
      // option3: [
      //   { text: "筛选", value: "筛选" },
      //   { text: "不限", value: "不限" },
      //   { text: "安选", value: "安选" },
      //   { text: "南北", value: "南北" },
      //   { text: "东", value: "东" },
      //   { text: "西", value: "西" },
      //   { text: "南", value: "南" },
      //   { text: "北", value: "北" }
      // ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      axios({
        url: "/api/lists",
        method: "post"
      }).then(res => {
        this.list = res.data.data;
      });
    },
    onChange(value) {
      console.log(value);
    },
    del(id) {
      axios({
        url: "/api/del",
        method: "delete",
        data: {
          id: id
        }
      }).then(res => {
        console.log(res);
        this.getList();
      });
    },
    search(value) {
      axios({
        url: "/api/search1",
        method: "post",
        data: {
          value: value
        }
      }).then(res => {
        this.list = res.data.data;
      });
    },
    showModal() {
      this.visible = true;
      this.flag = false;
    },
    handleOk(ObjetValue) {
      axios({
        url: "/api/getAdd",
        method: "post",
        data: {
          id: ObjetValue.id,
          site: ObjetValue.site,
          plot:ObjetValue.plot,
          price: ObjetValue.price,
          time: ObjetValue.time,
          name: ObjetValue.name
        }
      }).then(res => {
        this.getList();
      });
      this.visible = false;
    },
    city(data) {
      axios({
        url: "/api/getCitys",
        method: "post",
        data: { value: data }
      }).then(res => {
        this.list = res.data.data;
      });
    }
  }
};
</script>

<style scoped>
.modal input {
}
.city-1 {
  display: flex;
}
.city-1 li select {
  width: 150px;
  height: 30px;
  margin-left: 10px;
}
.area {
  height: 30px;
}
.sell {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  height: 100px;
}
main {
  flex: 1;
  overflow-y: auto;
}
.city {
  display: flex;
}
.search {
  margin-left: 30px;
}
header input {
  border: 1px solid #cccccc;
  border-radius: 5px;
  height: 40px;
}
header button {
  color: #ffffff;
  width: 100px;
  height: 40px;
  border-radius: 5px;
  background: rgb(3, 172, 214);
  border: none;
  margin-left: 10px;
}
.add {
  width: 100px;
  height: 30px;
  background: cornflowerblue;
  color: #ffffff;
  margin-top: 10px;
  border: none;
}
.table-1 {
  width: 100%;
  height: 400px;
  color: #000;
}
.table {
  width: 100%;
  height: 400px;
}
</style>